<template>
	<v-forms ref="formRef" :hideFooter="!formState">
		<template #tint1="scope">
			<el-Divider content-position="left" style="margin: 5px 0px"
				><span style="color: #1a63db; font-weight: bold">{{ scope.data.item.label }}</span></el-Divider
			>
		</template>
		<template #PlanFile>
			<!-- 在el-upload中fileList.value[0].raw是保存文件信息,因为forms中JSON.parse(JSON.String(fileList.value[0]))raw数据会转换失败 -->
			<template v-if="formState">
				<el-upload :auto-upload="false" v-model:file-list="fileList" multiple :limit="9" :on-change="(file: any, files: any) => { fileChangeHandle(file, files) }">
					<el-button type="primary">{{ $t('q4kXoXaQSru0wAekhDoZ') }}</el-button>
				</el-upload>
			</template>

			<template v-else>
				<!-- <el-badge :value="tempCount" type="primary">
					<el-button type="primary" @click="pushFile">{{ $t('tkHaJbV3XsBQVL0vzU') }}</el-button>
				</el-badge> -->
				<v-table  :data-list="showFileList" v-bind="fileListTableConfig">
				<template #image="scope"> <img v-if="isImagePath(scope.row.path)" style="width: 60px; height: 30px" :src="pathData + scope.row.path" /> </template>
				<template #operation="scope">
					<el-button @click="pushAction(scope.row)" type="primary" text size="small"> {{ $t('i8A6uFe7Z4rYBFs9LUfm') }} </el-button>
					<el-button v-if="formState == 2" @click="deleteAction(scope.row)" type="danger" text size="small"> {{ $t('mkwlMbm3qr88f0XxV9Pje') }} </el-button>
				</template>
			</v-table>
			</template>
		</template>

		<template #Detail>
			<!-- <el-badge :value="tempCount" type="primary">
				<el-button type="primary" @click="pushFile">{{ $t('tdePy9qmJRv5IxcMHjQ2u') }}</el-button>
			</el-badge> -->
			<v-table  :data-list="showFileList" v-bind="fileListTableConfig">
				<template #image="scope"> <img v-if="isImagePath(scope.row.path)" style="width: 60px; height: 30px" :src="pathData + scope.row.path" /> </template>
				<template #operation="scope">
					<el-button @click="pushAction(scope.row)" type="primary" text size="small"> {{ $t('i8A6uFe7Z4rYBFs9LUfm') }} </el-button>
					<el-button v-if="formState == 2" @click="deleteAction(scope.row)" type="danger" text size="small"> {{ $t('mkwlMbm3qr88f0XxV9Pje') }} </el-button>
				</template>
			</v-table>
		</template>
		<v-file-list ref="fileRef" @deleteFile="deleteAction"></v-file-list>
	</v-forms>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { trainingPlanFormConfig, VForms, trainingPlanChangeFormConfig, trainingPlanDetailFormConfig } from '../config/form/index';
import request from '/@/api/common/common';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

import { fileListTableConfig } from '../config/table/index';
import { vFileList, getCompleteFileArray, removeData, isImagePath } from '/@/components/ys/index';
import vTable from '/@/components/table/v-table.vue';
import eventBus from '/@/utils/eventBus';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;

const formRef = ref();
const fileList: any = ref([]); //培训计划附件
let formState: any = ref(1); //当前form表单状态 0详情 1新增 2修改

const showFileList: any = ref([]);
const pathData = window.$host + '/';

let currentChangeData: any;
let oldEmpstrID: any = ref('');
let oldEmpstr: any = ref('');

// 上传文件
const fileChangeHandle = (file: any, files: any[]) => {
	fileList.value = files;
};
const fileRef = ref();
let tempCount = ref(0);
//删除附件
const deleteAction = async (ids: any) => {
	//过滤掉被删除的id
	// tempCount.value = removeData(currentChangeData.v_PlanFilePath, ids);
	await request.postDeleteFilesData({
		id: ids.id,
	});
	showFileList.value = showFileList.value.filter((item: any) => item.id != ids.id);
	eventBus.emit('getData');
};
//附件管理
const pushFile = async () => {
	await fileRef.value.openHandle({
		list: getCompleteFileArray(currentChangeData.v_PlanFilePath),
		canAdd: false,
		canDelete: formState.value == 2,
		deleteFileMethod: request.postDeleteFilesData,
	});
};

//新增数据变更
const addNew = (data: any) => {
	showFileList.value = [];
	fileList.value = [];
	formState.value = 1;
	let list: any = trainingPlanFormConfig(data, false);
	formRef.value.openDialog(list, $t('wKo8l9Q1XIffuIx8XvRw'));
};
//详情
const detail = (data: any) => {
	formState.value = 0;
	processData(data);
	let list: any = trainingPlanDetailFormConfig(currentChangeData, true);
	formRef.value.openDialog(list, $t('l66LvY4lYknFzJdRs1'));
};

//修改数据
const change = (data: any) => {
	formState.value = 2;
	processData(data);
	let list: any = trainingPlanChangeFormConfig(currentChangeData);
	formRef.value.openDialog(list, $t('75P9yJcEhdVuIugDrxbB'));
};
//对服务器的数据进行加工后,展示
const processData = (data: any) => {
	fileList.value = [];
	//对data数据进行处理,将levels中的 v_Advice_Shielding 与v_Control_Level 转成数组
	//深拷贝
	currentChangeData = JSON.parse(JSON.stringify(data));
	currentChangeData.v_AssessmentMethod = currentChangeData.v_AssessmentMethod.split(',');
	tempCount.value = currentChangeData.v_PlanFilePath?.length || 0;
	showFileList.value = currentChangeData.v_PlanFilePath;

	let newTrainEmps = [];
	let newTrainEmpsID = [];
	oldEmpstrID.value = '';
	oldEmpstr.value = '';
	for (let i = 0; i < currentChangeData.trainEmps.length; i++) {
		let trainEmp = currentChangeData.trainEmps[i];
		newTrainEmps.push(trainEmp.v_EmpName);
		newTrainEmpsID.push(trainEmp.n_Id);
	}
	oldEmpstrID.value = newTrainEmpsID.join();
	oldEmpstr.value = newTrainEmps.join();
	currentChangeData.trainEmps = newTrainEmps;
};

const pushAction = (data: any) => {
	window.open(pathData + data.path, '_blank');
};

defineExpose({
	addNew,
	change,
	detail,
	fileList,
	oldEmpstrID,
	oldEmpstr,
	// implementFileList,
});
</script>
<scope lang="scss" scoped></scope>
